<template>
	<view>
		<!-- <view class="searchBox">
			<view class="search-ipt" @click="search">
				<image src="../../../static/search-img.png" mode=""></image>
				<input type="text" placeholder="请输入关键词">
			</view>
		</view>
		
		<view class="swiperBox">
			<u-swiper :list="info" :radius="10" height="327rpx" keyName="image" @click="thumbinfo"></u-swiper>
		</view>
		
		<view class="tags">
			<view class="tag">全部</view>
			<view class="tag">简单</view>
			<view class="tag">高佣金</view>
		</view>
		
		<view class="item-list">
			<view class="each">
				<view class="l">
					<image src="../../../static/logo.png" mode=""></image>
					<view class="title">
						<view class="name">云闪付下载</view>
						<view class="each-tags">
							<text class="each-tag">注册下载</text>
							<text class="each-tag">注册下载</text>
							<text class="each-tag">运维传媒</text>
							<text class="each-tag">注册下载</text>
						</view>
						<view class="jdt">
							<u-line-progress activeColor="#FEBF4E" :showText="false" :percentage="10" height="8"></u-line-progress> <text>1/10</text>
						</view>
					</view>
				</view>
				<view class="price">佣金 <text>4.80</text> 元</view>
			</view>
		</view>
		
		<view class="issue" @click="authTo('pages/my/renWu/issue')">
			发布信息
		</view> -->
		
		
		
		
		<view class="container">
			<view class="contentb">
				<view class="header">
					<!-- <view class="l">悬赏大厅</view> -->
					<view class="headBox">
						<view class="subBox">
							<!-- #ifdef APP -->
							<view class="sub" @click="authTo('pages/third/xianwan')">游戏赚钱</view>
							<view class="sub" @click="authTo('pages/third/task')">全网任务</view>
							<!-- #endif -->
						</view>
						<!-- <view class="searchBox">
							<view class="r" @click="searcha()">
								<u-icon name="search"></u-icon>
								<view class="word">输入搜索信息</view>
								<view class="btn">搜索</view>
							</view>
						</view> -->
						<view class="searchBox">
							<view class="search-ipt" @click="searcha">
								<image src="../../../static/search-img.png" mode=""></image>
								<input type="text" placeholder="请输入关键词">
							</view>
						</view>
					</view>
					<view class="swiperBox">
						<u-swiper :list="info" :radius="10" height="327rpx" keyName="image" @click="thumbinfo"></u-swiper>
					</view>
		
				</view>
				<view class="selectBoxb">
					<view class="select" @click="select(1)" :class="{active: type === 1}">{{cate}}
						<u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
					</view>
					<!-- <view class="select" @click="select(1)" :class="{active: type === 1}">最新</view> -->
					<view class="select" @click="select(2)" :class="{active: type === 2}">简单 </view>
					<view class="select" @click="select(3)" :class="{active: type === 3}">高佣金</view>
				</view>
				<scroll-view scroll-y="true" class="main" @scrolltolower="lower()">
					<!-- <view class="list" v-for="(item,index) of list" :key="index" @click="detaila(item.id)">
						<image :src="oss(item.avatar)" class="cover" mode=""></image>
						<view class="info">
							<view class="title">
								<view class="l">{{item.name}}</view>
							</view>
							<view class="types">
								<view class="btn">{{item.catename}}</view>
								<view class="btn btn1">{{item.platform}}</view>
							</view>
							<view class="numBox">
								<u-line-progress :percentage="item.acceptnum/item.num" height="4" :showText="false"
									activeColor="#FFC141">
								</u-line-progress>
								<view class="num"><text class="word">{{item.acceptnum}}</text>/{{item.num}}</view>
							</view>
						</view>
						<view class="moeny">佣金{{item.price}}元</view>
						<view class="vip" v-if="item.istop > 0">
							<image src="../../../static/serve/vip.png" mode="" class="icon"></image>
							<view class="word">置顶</view>
						</view>
					</view> -->
					<view class="item-list">
						<view class="each" v-for="(item,index) of list" :key="index" @click="detaila(item.id)">
							<view class="l">
								<image :src="oss(item.avatar)" mode=""></image>
								<view class="title">
									<view class="name">{{item.name}}</view>
									<view class="each-tags">
										<text class="each-tag">{{item.catename}}</text>
										<text class="each-tag">{{item.platform}}</text>
									</view>
									<view class="jdt">
										<u-line-progress activeColor="#FEBF4E" :showText="false" :percentage="item.acceptnum/item.num" height="8"></u-line-progress> <text>{{item.acceptnum}}/{{item.num}}</text>
									</view>
								</view>
							</view>
							<view class="price">佣金 <text>{{item.price}}</text> 元</view>
						</view>
					</view>
					<u-empty v-if="finish && list.length === 0" :marginTop="200">
					</u-empty>
					<u-picker :show="show" :columns="cateList" @confirm="confirm" @close="show = false"
						@cancel="show = false" keyName="name"></u-picker>
				</scroll-view>
				<image src="../../../static/add.png" class="add" mode="" @click="authTo('pages/my/task/publish?type=1')"></image>
		
			</view>
		</view>
		
		
		<u-tabbar
			:value="value1"
			@change="click1"
			:fixed="true"
			:placeholder="true"
			activeColor="#FEBF4E"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../../static/tab/indexA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../../static/tab/indexA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="服务">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../../static/tab/serveA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../../static/tab/serveA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="二手">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../../static/tab/uploada.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../../static/tab/uploada.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="招聘">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../../static/tab/releaseA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../../static/tab/releaseA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../../static/tab/myA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../../static/tab/myA.png"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.130.js';
	export default {
		data() {
			return {
				info:[{image:'https://yikang.ykdjspa.com/uploads/20231124/82b2c4429e520dc48ac6d5091bf490ee.jpg'}],
				barHeight: '20',
				info: [],
				longitude: '115.43106',
				latitude: '30.240836',
				hotList: [],
				items: [],
				cate_id: '',
				cate: '全部分类',
				page: 1,
				finish: false,
				list: [],
				type: 1,
				juli_sort: '',
				cateList: [],
				show: false,
				equiptype: 0,
				price_sort: '',
				city: '黄冈市',
				second: false,
				sweixin: '',
				tabs:1,
				
				value1:5,
			}
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			this.equiptype = uni.getSystemInfoSync().platform == 'ios' ? 2 : 1
			this.getConfig()
			let that = this
			if(uni.getStorageSync('lng')){
				this.latitude = uni.getStorageSync('lat');
				this.longitude = uni.getStorageSync('lng');
				this.city = uni.getStorageSync('city');
			} else if(uni.getStorageSync('token')){
				uni.showLoading({
					title: '获取信息中'
				});
				let amapPlugin = new amap.AMapWX({
					key: 'fdca19ddc2301158a38cfda641e37a08'
				});
				amapPlugin.getRegeo({
					success: (data) => {
						
						console.log(data, '成功')
						that.longitude = data[0].longitude
						that.latitude = data[0].latitude
						if (data[0].regeocodeData.addressComponent.city === '[]' || data[0].regeocodeData
							.addressComponent.city.length === 0) {
							that.city = data[0].regeocodeData.addressComponent.province;
						} else {
							that.city = data[0].regeocodeData.addressComponent.city;
						}
						uni.setStorageSync('province', data[0].regeocodeData.addressComponent.province);
						uni.setStorageSync('city', data[0].regeocodeData.addressComponent.city);
						uni.setStorageSync('district', data[0].regeocodeData.addressComponent.district);
						uni.setStorageSync('lng', data[0].longitude);
						uni.setStorageSync('lat', data[0].latitude);
						uni.hideLoading();
						that.getList()
					},
					fail: (e) => {
						
						console.log(e)
						uni.hideLoading();
						// that.city = '郑州市';
						// that.longitude = '113.67734';
						// that.latitude = '34.75383';
						// that.getList()
					}
				});
			}
			that.getList()
			that.getType()
		
			// #ifdef APP-PLUS  
			console.log("plus");
			plus.share.getServices(function(s) {
				console.log(s)
				var shares = {};
				for (var i = 0; i < s.length; i++) {
					var t = s[i];
					console.log(t);
					shares[t.id] = t;
					console.log(t.id);
				}
		
				var sweixin = shares['weixin'];
				console.log(sweixin)
				that.sweixin = sweixin
		
			}, function(e) {
				console.log("获取分享服务列表失败：" + e.message);
			});
			//#endif
		},
		onShow() {
			if (this.second) {
				this.reload()
			}
			this.getXcx()
		},
		methods: {
			click1(e) {
				console.log('click1', e);
				if(e==0){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else if(e == 1){
					uni.switchTab({
						url:'/pages/serve/newserve'
					})
				}else if(e == 2){
					uni.switchTab({
						url:'/pages/index/indexa'
					})
					fail((e)=>{
					})
				}else if(e == 3){
					uni.switchTab({
						url:'/pages/release/release'
					})
					fail((e)=>{
					})
				}else if(e == 4){
					uni.switchTab({
						url:'/pages/my/my'
					})
					fail((e)=>{
					})
				}
			},
			// 同城
			check(index) {
				this.tabs = index
				this.reload()
				// this.getList()
				this.getConfig()
			},
			thumbinfo(index) {
				if(this.tabs == 0) {
					console.log(this.info)
					if (this.info[index].url_type == 0) {
						uni.$u.route({
							url: 'pages/common/article',
							params: {
								id: this.info[index].id
							}
						})
					} else if (this.info[index].url_type == 1) {
						this.goto(`pages/common/webview?url=${encodeURIComponent(this.info[index].url)}`)
					} else if (this.info[index].url_type == 2) {
						console.log(this.info[index].url)
						// #ifdef MP-WEIXIN
						uni.navigateToMiniProgram({
							appId: this.info[index].url
						})
						// #endif
					} else if (this.info[index].url_type == 3) {
					
						var n = this;
						//#ifdef APP-PLUS  
						console.log(n.sweixin);
					
						n.sweixin ? n.sweixin.launchMiniProgram({
							id: this.info[index].url
						}) : plus.nativeUI.alert('当前环境不支持微信操作!');
					
						//#endif
					}
				}else{
					if (this.info[index].url_type == 0) {
						uni.$u.route({
							url: 'pages/common/article',
							params: {
								id: this.info[index].id
							}
						})
					} else if (this.info[index].url_type == 1) {
						this.goto(`pages/common/webview?url=${encodeURIComponent(this.info[index].url)}`)
					} else if (this.info[index].url_type == 2) {
						// #ifdef MP-WEIXIN
						uni.navigateToMiniProgram({
							appId: this.info[index].url
						})
						// #endif
					} else if (this.info[index].url_type == 3) {
					
						var n = this;
						//#ifdef APP-PLUS  
					
						n.sweixin ? n.sweixin.launchMiniProgram({
							id: this.info[index].url
						}) : plus.nativeUI.alert('当前环境不支持微信操作!');
						//#endif
					}
					
				}
		
			},
			search() {
				uni.$u.route({
					url: 'pages/common/search',
					params: {
						type: 0
					}
				})
			},
			detail(id) {
				uni.$u.route({
					url: 'pagesA/index/detail',
					params: {
						id: id
					}
				})
			},
			select(type) {
				if(this.tabs == 0) {
					this.type = type
					if (type === 2) {
						this.price_sort = 0
					} else {
						this.price_sort = ''
					}
					if (type === 3) {
						this.juli_sort = 0
					} else {
						this.juli_sort = ''
					}
					this.reload()
				}else{
					if (type === 1) {
						this.show = true
					} else {
						this.type = type
						if (type === 2) {
							this.price_sort = 0
						} else {
							this.price_sort = ''
						}
						if (type === 3) {
							this.juli_sort = 1
						} else {
							this.juli_sort = ''
						}
						this.reload()
					}
				}
			},
			lower() {
				console.log(111)
				this.page++
				this.getList()
			},
			selectHot(item) {
				this.cate_id = item.id
				this.cate = item.name
				this.reload()
			},
			onchange(e) {
				console.log(e)
				this.cate_id = e.detail.value[1].value
				this.cate = e.detail.value[1].text
				this.reload()
			},
			getXcx() {
				uni.$u.http.post('/xcx', {}).then(res => {
					if (res.code == 1) {
						uni.setStorageSync('xcx', res.data);
					}
				}).catch((res) => {
		
				})
			},
			getType() {
				if(this.tabs == 0){
					uni.$u.http.post('/getcitycate ', {}).then(res => {
						if (res.code == 1) {
							res.data.unshift({
								value: 0,
								text: '全部分类',
								children: [{
									text: '全部分类',
									value: -1
								}]
							})
							this.items = res.data
						}
					}).catch((res) => {
					
					})
				}else{
					uni.$u.http.post('/getcitycate ', {}).then(res => {
						if (res.code == 1) {
							this.items = res.datas
						}
					}).catch((res) => {
					
					})
				}
			},
			reload() {
				this.finish = false
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				// console.log(111)
				if (this.finish) {
					return
				}
		
				let data = ''
				if (this.tabs == 0) {
					data = {
						city: this.city,
						lng: this.longitude,
						lat: this.latitude,
						page: this.page,
						cate_id: this.cate_id === -1 ? '' : this.cate_id
					}
					if (this.type === 2) {
						data.price_sort = this.price_sort
					} else if (this.type === 3) {
						data.juli_sort = this.juli_sort
					}
					uni.$u.http.post('/home', data).then(res => {
						this.second = true
						if (res.code == 1) {
							res.data.hotList.unshift({
								id: -1,
								name: '全部分类'
							})
							this.hotList = res.data.hotList
							this.list = this.list.concat(res.data.list)
							if (res.data.list.length === 0) {
								this.finish = true
							}
						}
					}).catch((res) => {
		
					})
				} else {
					data = {
						city: this.city,
						lng: this.longitude,
						lat: this.latitude,
						page: this.page,
						equiptype: 1,
						pay_type:'money'
					}
					if (this.type === 2) {
						data.simple = 1
					}
					if (this.type === 3) {
						data.high = 1
					}
					if (this.type === 1) {
						data.cate_id = this.cate_id
					}
					uni.$u.http.post('/Task ', data).then(res => {
						this.second = true
						if (res.code == 1) {
							res.data.cateList.unshift({
								name: '全部分类',
								id: ''
							})
							this.cateList = [res.data.cateList]
							this.list = this.list.concat(res.data.list)
							if (res.data.list.length === 0) {
								this.finish = true
							}
						}
					}).catch((res) => {
		
					})
				}
		
			},
			getConfig() {
				if (this.tabs == 0) {
					uni.$u.http.post('/thumb', {
						type: 0,
						// #ifdef APP
						pro_type: 1,
						// #endif
						// #ifdef MP-WEIXIN
						pro_type: 0
						// #endif
					}).then(res => {
						if (res.code == 1) {
							this.info = res.data.map((value) => {
								return {
									image: this.oss(value.image),
									id: value.id,
									url: value.url,
									url_type: value.url_type
								}
							})
		
						}
					}).catch((res) => {
		
					})
				} else {
					uni.$u.http.post('/thumb', {
						type: 1,
						// #ifdef APP
						pro_type: 1,
						// #endif
						// #ifdef MP-WEIXIN
						pro_type: 0
						// #endif
					}).then(res => {
						if (res.code == 1) {
							this.info = res.data.map((value) => {
								return {
									image: this.oss(value.image),
									id: value.id,
									url: value.url,
									url_type: value.url_type
								}
							})
		
						}
					}).catch((res) => {
		
					})
				}
		
			},
			// 悬赏
			gotabber() {
				uni.switchTab({
					url: '/pages/index/indexa'
				})
			},
			searcha() {
				uni.$u.route({
					url: 'pages/common/search',
					params: {
						type: 1
					}
				})
			},
			detaila(id) {
				uni.$u.route({
					url: 'pages/task/detail?id=' + id
				})
			},
			confirm(e) {
				console.log(e)
				this.type = 1
				this.cate_id = e.value[0].id
				this.cate = e.value[0].name
				this.show = false
				this.reload()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.searchBox {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.search-ipt {
			padding: 0 32rpx;
			width: 550rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
				// margin-left: 32rpx;
			}
		}
	}
	
	.swiperBox {
		padding: 20rpx;
	}
	
	.tags {
		padding: 32rpx 32rpx 8rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tag {
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	
	.item-list {
		.each {
			width: 636rpx;
			height: 198rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			padding: 24rpx;
			margin: auto;
			margin-top: 24rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			.l {
				display: flex;
				justify-content: space-between;
				align-items: center;
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
				}
				.title {
					margin-left: 24rpx;
					.name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}
					.each-tags {
						margin-top: 21rpx;
						width: 300rpx;
						overflow: hidden;
						overflow-x: auto;
						white-space: nowrap;
						.each-tag {
							font-size: 20rpx;
							padding: 5rpx 8rpx;
							font-weight: 500;
							color: #666666;
							background-color: #F6F6F6;
							margin-right: 8rpx;
						}
					}
					.jdt {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						text {
							font-size: 22rpx;
							padding-left: 16rpx;
							font-weight: 500;
							color: #999999;
						}
					}
				}
			}
			.price {
				font-size: 22rpx;
				font-weight: 500;
				color: #FA6759;
				text {
					font-size: 30rpx;
				}
			}
		}
	}
	
	.issue {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #FECB6F 0%, #FFAE1C 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		right: 32rpx;
		bottom: 200rpx;
	}
	
	
	
	
	.container {
		height: 100vh;
		// background: linear-gradient(to bottom, #FFDF41, #F6F6F6);
		background-size: 750rpx 500rpx;
		background-repeat: no-repeat;
		
		.tabs {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		
		
			.tab:last-child {
				/* #ifdef MP-WEIXIN */
				padding-right: 220rpx;
				/* #endif */
			}
		}
		
		.a {
			font-weight: bold;
		}
		
		.contenta {
			// background: linear-gradient(to bottom, #FFDF41, #F6F6F6);
			// background-size: 750rpx 500rpx;
			// background-repeat: no-repeat;
			height: 100vh;
			display: flex;
			flex-direction: column;
	
			.tabs {
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
	
				.tab:last-child {
					/* #ifdef MP-WEIXIN */
					padding-right: 220rpx;
					/* #endif */
				}
			}
	
			.a {
				font-weight: bold;
			}
	
			.main {
				flex: 1;
				overflow: hidden;
			}
	
			.header {}
	
			.searchBox {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;
	
				.l {
					color: #191615;
					font-size: 35rpx;
					margin-right: 20rpx;
					font-weight: bold;
				}
	
				.r {
					background-color: #fff;
					height: 66rpx;
					flex: 1;
					border-radius: 33rpx;
					display: flex;
					align-items: center;
					padding: 0 4rpx 0 20rpx;
	
					.word {
						flex: 1;
						color: #999999;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
	
					.btn {
						background: linear-gradient(to bottom, #FFDF41, #FFC141);
						width: 100rpx;
						height: 56rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #191615;
						font-size: 26rpx;
						border-radius: 28rpx;
					}
				}
			}
	
			.swiperBox {
				padding: 20rpx;
			}
	
			.navBox {
				width: 100%;
				overflow: hidden;
				display: flex;
	
			}
	
			.navMain {
				display: flex;
				align-items: center;
				flex-direction: row;
				padding: 20rpx 0 20rpx 20rpx;
	
				.nav {
					height: 60rpx;
					border-radius: 10rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #fff;
					margin-right: 20rpx;
					flex-shrink: 0;
					font-size: 25rpx;
				}
	
				.active {
					background: linear-gradient(to right, #FFDF41, #FFC141);
				}
			}
	
			.selectBoxa {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
	
				.select {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #575859;
					font-size: 25rpx;
	
				}
	
				.active {
					color: #FF8007;
				}
	
				.typeBox {
					position: relative;
	
					.r {
						left: 0;
						top: 0;
						position: absolute;
						width: 100%;
						height: 100%;
						// opacity: 0;
						z-index: 100;
					}
				}
			}
	
			.list {
				display: flex;
				margin: 10rpx 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
	
				.cover {
					width: 180rpx;
					height: 180rpx;
					margin-right: 20rpx;
					flex-direction: 0;
					border-radius: 10rpx;
				}
	
				.address {
					font-size: 25rpx;
					color: #575859;
					height: 90rpx;
				}
	
				.info {
					flex: 1;
	
					.title {
						display: flex;
						align-items: center;
	
						.l {
							flex: 1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
						}
	
						.r {
							color: #428DFC;
							font-size: 24rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
						}
					}
	
					.num {
						display: flex;
						align-items: center;
						justify-content: space-between;
	
						.l {
							background-color: #FFFAE5;
							height: 36rpx;
							border-radius: 18rpx;
							color: #FF8007;
							font-size: 20rpx;
							padding: 0 20rpx;
							display: flex;
							align-items: center;
						}
	
						.r {
							color: #FF5B1A;
							font-size: 40rpx;
	
							.icon {
								font-size: 28rpx;
							}
						}
					}
				}
			}
	
			.add {
				position: fixed;
				right: 30rpx;
				bottom: 100rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}
	
		.contentb {
			// background: linear-gradient(to bottom, #FFDF41, #F6F6F6);
			// background-size: 750rpx 500rpx;
			// background-repeat: no-repeat;
			height: 100vh;
			display: flex;
			flex-direction: column;
	
			.tabs {
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
	
	
				.tab:last-child {
					/* #ifdef MP-WEIXIN */
					padding-right: 220rpx;
					/* #endif */
				}
			}
	
			.a {
				font-weight: bold;
			}
	
			.header {
	
				.headBox {
					width: 700rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					background: #fff;
					margin: 0 auto;
				}
	
				.subBox {
	// 				margin: 0 auto;
	// 				border-radius: 10rpx 10rpx 0 0;
	// 				display: flex;
	// 				padding-bottom: 20rpx;
	
	// 				align-items: center;
	// 				justify-content: center;
	// 				border-bottom: 1px solid #FFDF41;
	
					.sub {
						flex: 1;
						color: #999;
						text-align: center;
						height: 88rpx;
						line-height: 88rpx;
					}
	
					.active {
						color: #333;
						font-weight: bold;
						position: relative;
					}
	
					.active:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translate(-50%, 0);
						width: 40rpx;
						height: 4rpx;
						background: #FF2442;
						border-radius: 2rpx;
					}
				}
			}
	
			.main {
				flex: 1;
				overflow: hidden;
			}
	
	// 		.searchBox {
	// 			display: flex;
	// 			align-items: center;
	// 			padding: 0 20rpx 10rpx;
	
	// 			.l {
	// 				color: #191615;
	// 				font-size: 35rpx;
	// 				margin-right: 20rpx;
	// 				font-weight: bold;
	// 			}
	
	// 			.r {
	// 				background-color: #fff;
	// 				height: 66rpx;
	// 				flex: 1;
	// 				border-radius: 33rpx;
	// 				display: flex;
	// 				align-items: center;
	// 				padding: 0 4rpx 0 20rpx;
	
	// 				.word {
	// 					flex: 1;
	// 					color: #999999;
	// 					font-size: 24rpx;
	// 					margin-left: 10rpx;
	// 				}
	
	// 				.btn {
	// 					background: linear-gradient(to bottom, #FFDF41, #FFC141);
	// 					width: 100rpx;
	// 					height: 56rpx;
	// 					display: flex;
	// 					align-items: center;
	// 					justify-content: center;
	// 					color: #191615;
	// 					font-size: 26rpx;
	// 					border-radius: 28rpx;
	// 				}
	// 			}
	// 		}
	.searchBox {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.search-ipt {
			padding: 0 32rpx;
			width: 550rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 39rpx;
			opacity: 1;
			display: flex;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
				// margin-left: 32rpx;
			}
		}
	}
	
			.swiperBox {
				padding: 20rpx;
			}
	
			// .navBox {
			// 	width: 100%;
			// 	overflow: hidden;
			// 	display: flex;
	
			// }
	
			// .navMain {
			// 	display: flex;
			// 	align-items: center;
			// 	flex-direction: row;
			// 	padding: 20rpx 0 20rpx 20rpx;
	
			// 	.nav {
			// 		height: 60rpx;
			// 		border-radius: 10rpx;
			// 		padding: 0 20rpx;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: center;
			// 		background: #fff;
			// 		margin-right: 20rpx;
			// 		flex-shrink: 0;
			// 		font-size: 25rpx;
			// 	}
	
			// 	.active {
			// 		background: linear-gradient(to right, #FFDF41, #FFC141);
			// 	}
			// }
	
			.selectBoxb {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
	
				.select {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #575859;
					font-size: 25rpx;
				}
	
				.active {
					color: #FF8007;
				}
			}
	
			.list {
				display: flex;
				margin: 10rpx 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				align-items: center;
				position: relative;
	
				.vip {
					position: absolute;
					left: 0;
					top: 40rpx;
					width: 74rpx;
					height: 44rpx;
	
					.icon {
						width: 74rpx;
						height: 44rpx;
					}
	
					.word {
						width: 74rpx;
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #191615;
						font-size: 20rpx;
						position: absolute;
						left: 0;
						top: -10rpx;
						font-weight: bold;
					}
				}
	
				.cover {
					width: 140rpx;
					height: 140rpx;
					margin-right: 20rpx;
					flex-direction: 0;
					border-radius: 10rpx;
					flex-shrink: 0;
				}
	
				.address {
					font-size: 25rpx;
					color: #575859;
				}
	
				.moeny {
					font-size: 30rpx;
					color: #FF5B1A;
					margin-left: 40rpx;
					flex-shrink: 0;
				}
	
				.info {
					flex: 1;
					overflow: hidden;
	
					.title {
						display: flex;
						align-items: center;
	
						.l {
							flex: 1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
						}
	
						.r {
							color: #428DFC;
							font-size: 24rpx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
						}
					}
	
					.types {
						display: flex;
						align-items: center;
						margin: 20rpx 0;
	
						.btn {
							background: #FFFAE5;
							height: 36rpx;
							border-radius: 18rpx;
							padding: 0 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #FF8007;
							font-size: 24rpx;
							margin-right: 10rpx;
						}
	
						.btn1 {
							background-color: #E9F3FF;
							color: #428DFC;
						}
					}
	
					.numBox {
						display: flex;
						align-items: center;
	
						.num {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							margin-left: 10rpx;
	
							.word {
								color: #428DFC;
							}
						}
					}
				}
			}
	
			.add {
				position: fixed;
				right: 30rpx;
				bottom: 150rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}
	
	
	}
	
	
	.u-page__item__slot-icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>